<template>
  <div id="app">
    <div class="nav-box">
      <ul class="nav">
        <!--<li>-->
          <!--&lt;!&ndash;定义hash的模式来切换页面(默认的)，也可以使用history模式则没有#，需要在路由文件中配置mode为history，在histroy模式下使用a标签的话也不需要加#号了，但就不是一个单页应用了，因为a默认有一个刷新页面的功能，那么就需要阻止该默认行为，vue中提供router-link标签来代替a，这样可以兼容histroy和hash两种模式，不用在手动添加#号&ndash;&gt;-->
          <!--&lt;!&ndash;<a href="#/">home</a>&ndash;&gt;-->
          <!--&lt;!&ndash;<a href="/">home</a>&ndash;&gt;-->
          <!--&lt;!&ndash;如果想让生成的元素不是a,那么使用tag属性,所以进行如下改写&ndash;&gt;-->
          <!--<router-link :to="index" tag="div">home</router-link>-->
        <!--</li>-->
         <!-- 也可是使用对象的形式指定路径 -->
         <!-- <router-link :to="{path: '/index'}" exact tag="li" > -->
        <!--exact代表的是精确匹配，比如当前路径是/about,那么在未加exact之前是包含了根路径/和about路径,这两种状态下的点击元素都将被加上active-class类名，但实际我们只想about的点击元素是选中状态则使用exact加到根路径的元素上-->
      <!-- event等于monuserover表示的是在何种事件下触发选中该项 -->
        <router-link :to="index" exact tag="li" event="mouseover">
          <i></i>
          <span>我是首页</span>
        </router-link>
        <li>
          <!--<a href="#/document">document</a>-->
          <!--<a href="/document">document</a>-->
          <!--active-class设置自身选中时的样式为activeClass(即当前路由与to的路由相同时),可以不参照全局下的is-active-->
          <!-- /document#abc设置锚点，在路由为/document#abc时，自动定位到document组件中id为abc的文档位置，实际情况需要在路由中配置才会生效 -->
          <router-link to="/document#abc" active-class="activeClass">我是文档</router-link>
        </li>
        <li>
          <!--<a href="#/about">about</a>-->
          <!--<a href="/about">about</a>-->
          <router-link to="/about">关于我</router-link>
        </li>
        <li>
          <router-link to="/user">
            user
          </router-link>
        </li>
      </ul>
    </div>
    <!--路由匹配到显示的组件,当需要显示多个组件时，可以引入多个router-view然后命名指定组件显示到哪个router-view上-->
    <!--<router-view name="slider" class="slider"></router-view>-->
    <!--使用vue中自带的transition给视图切换下的内容设置过渡动画-->
    <!-- mode代表的是动画的过渡模式，out-in是离开的元素先过渡进入的元素后过渡，in-out恰好相反，这样就可以避免离开和进入的元素在过渡期间同时出现在页面上 -->
    <!-- name代表的是该动画运用的是哪个效果，left就是代表css中enter或leave前面为left的样式效果 -->
    <!-- <transition name="left" mode="out-in">
      <router-view class="center"></router-view>
    </transition> -->
    当前导航的下标：{{$route.meta.index}}
    <button style="background:pink" @click="backHandle">后退</button>
     <button style="background:pink" @click="forwardHandle">前进</button>
     <button  style="background:pink" @click="goHandle">控制前进后退的步数</button>
     <button  style="background:pink" @click="pushHandle">跳转到指定的导航push</button>
      <button  style="background:pink" @click="replaceHandle">跳转到指定的导航replace</button>
    <hr>
    <transition :name="names">
      <router-view class="center"></router-view>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'app',
  watch: {
    $route (to, from) {  //  to是目标路由对象，from是离开路由对象
      // console.log(to.meta.index)  //  目标导航下标
      // console.log(from.meta.index) //   离开导航下标
      if (to.meta.index < from.meta.index) { //  根据当前导航的坐标动态设置要过渡的效果
        this.names = 'right'
      } else {
        this.names = 'left'
      }
    }
  },
  data () {
    return {
      index: '/home',
      names: 'left' //  router-view下所要运用的过渡效果name的值
    }
  },
  methods: {
    //  后退
    backHandle () {
      this.$router.back()  //  back()是$router下的方法，可以实现后退操作，相当于浏览器上后退，默认为1步
    },
    //  前进
    forwardHandle () {
      this.$router.forward()
    },
    //  控制前进后退的步数
    goHandle () {
      this.$router.go(-1)  //  负数代表后退，正数代表前进，0代表当前的导航就是刷新
    },
    pushHandle () {
      // this.$router.push('/document')  //  指定跳转到到哪一个目标链接,会在历史记录栈中添加一条记录
      this.$router.push({path: '/document'})
    },
    replaceHandle () {
      this.$router.replace({path: '/about'})  //  指定跳转到到哪一个目标链接,会在历史记录栈中替换当前记录
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/*元素进入的开始过渡状态,如从一个导航切换到另一个导航，切换进入的这个导航下的内容会应用enter下的过渡效果*/
  .v-enter{
    opacity: 0;
  }
  /*定义进入的结束状态*/
  .v-enter-to{
    opacity: 1;
  }
  /*定义进入活动状态的过渡时间*/
  .v-enter-active{
    transition: 2s;
  }
/*元素离开的过渡状态,如从一个导航切换到另一个导航，在切换是原导航下的内容会应用leave下的过渡效果*/
  .v-leave{
    opacity: 1;
  }
  /*定义离开的结束状态*/
  .v-leave-to{
    opacity: 0;
  }
  /*定义离开状态的过渡时间*/
  .v-leave-active{
    transition: 2s;
  }
  /* 自定义动画效果 ，从屏幕右边向左移动*/
  .left-enter{
    transform: translateX(100%);
  }
  .left-enter-to{
    transform: translateX(0);
  }
  .left-enter-active,.left-leave-active{
    transition: 1s;
  }
  .left-leave{
    transform: translateX(0)
  }
  .left-leave-to{
     transform: translateX(-100%)
  }
   /* 自定义动画效果 ，从屏幕左边向右移动*/
  .right-enter{
    transform: translateX(-100%);
  }
  .right-enter-to{
    transform: translateX(0);
  }
  .right-enter-active,.right-leave-active{
    transition: 1s;
  }
  .right-leave{
    transform: translateX(0)
  }
  .right-leave-to{
     transform: translateX(100%)
  }
</style>
